<template>
	<!-- 推荐佣金 -->
	<view slot="gBody">
		<scroll-view class="grace-scroll-y" scroll-y :style="{height:height}" @scrolltolower="get_info()">
			<view v-for="(item,index) in club" :key="index">
				<image :src="item.cc_img_url" mode="" style="width: 580rpx;height: 270rpx;margin:10rpx 85rpx;"></image>
				<view class="covse" v-show="item.cc_id" v-if="is_cover">
					<text style="font-size: 80rpx;color: #FFFFFF;line-height: 270rpx;">撤回</text>
				</view>
				<view class="bhan" v-show="item.cc_encoding" v-else>
					<view class="bianhao">{{'NO.'+item.cc_encoding}}</view>
					<view class="bianx">
						<view class="btn" style="margin-right: 18rpx;" @tap="bianxian(item.cc_id)">变现</view>
						<view class="btn" @tap="use_sy(item.cc_encoding,item.cc_id)">使用</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
		<!-- 提现弹框 -->
		<uni-popup ref="popup" type="center" style="z-index: 9999;">
			<view class="tabk">
				<view class="tabk_b">鑫琏卡变现</view>
				<view class="tabk_x">确认将此卡交易变现</view>
				<view class="tabk_y">折扣价{{sell_money}}元</view>
				<view class="tabk_k">可在收益页面查看余额后提现</view>
				<view class="bnts">
					<view class="qr_s" @tap="qr">确认</view>
					<view class="qx_s" @tap="qx">取消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	export default {
		data() {
			return {
				page: 0,
				club: [],
				sell_money: '',
				id: '',
				is_cover:false
				
			}
		},
		onShow() {
			var sysinfo = uni.getSystemInfoSync();
			this.height = (sysinfo.safeArea.height - 20) + 'px';
			this.get_info();
		},
		methods: {
			get_info() {
				var vm = this;
				vm.page += 1;
				vm.req.post(
					vm.lochost + '/index/index?method=club_card_list', {
						page: vm.page,
						size: 10,
					}, {},
					function(res) {
						console.log(res);
						var club_list = res.data.data;
						for (let i = 0; i < club_list.length; i++) {
							vm.club.push(club_list[i])
						}
					}
				)
			},
			// 变现按钮
			bianxian(card_id) {
				this.id = card_id
				var vm = this
				vm.req.post(
					vm.lochost + '/index/index?method=sell_money', {
						card_id: card_id
					}, {},
					function(res) {
						if (res.code == 200) {
							vm.sell_money = res.data.sell_money
							vm.$refs.popup.open()
						}
					}
				)

			},
			// 变现确认按钮
			qr(ids){
				ids = this.id
				console.log(ids);
				if(ids==this.id){
						var club = this.club
					this.req.each(club,function(i,v){
						if(ids==i){
							if(v.cc_state!==1){
								v.cc_state=3;
								this.is_cover = true
							}else{
								v.cc_state=1;
							}
							club[i]=v;
						}
					})
					this.club = club
				}
				// var vm = this
				// vm.req.post(
				// vm.lochost + '/index/index?method=apply_sell',{
				// 	card_id:vm.id
				// },{},
				// function(res){
					
				// }
				// )
			},
			// 变现取消按钮
			qx() {
				this.$refs.popup.close()
			},
			// 鑫链卡使用
			use_sy(coding,card_id){
				this.Goto('/pages/profit/Use_file?card_id='+card_id+'&coding='+coding)
			},
		},
		components: {
			uniPopup
		}
	}
</script>

<style>
	.bhan {
		display: flex;
		justify-content: space-between;
	}

	.bianhao {
		float: left;
		margin-top: -65rpx;
		z-index: 99;
		color: rgba(250, 146, 52, 1);
		font-size: 29rpx;
		margin-left: 120rpx;
	}

	.bianx {
		margin-right: 90rpx;
	}

	.btn {
		display: inline-block;
		/* float: right; */
		width: 120rpx;
		height: 35rpx;
		font-size: 22rpx;
		line-height: 35rpx;
		transform: translateY(-60rpx);
		background-color: #000000;
		color: #FFFFFF;
		border: 1rpx solid #FFFFFF;
		text-align: center;
		border-radius: 10rpx;
		/* margin-right: 18rpx; */
	}

	.tabk {
		width: 540rpx;
		height: 340rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

	}

	.tabk_b {
		font-size: 32rpx;
		margin-left: 180rpx;
		transform: translateY(40rpx);
	}

	.tabk_x {
		margin-top: 10rpx;
		font-size: 32rpx;
		margin-left: 120rpx;
		transform: translateY(40rpx);
	}

	.tabk_y {
		font-size: 32rpx;
		margin-left: 180rpx;
		transform: translateY(40rpx);
	}

	.tabk_k {
		font-size: 22rpx;
		margin-left: 120rpx;
		transform: translateY(40rpx);
		color: rgba(154, 154, 154, 1);
		margin-top: 21rpx;
	}

	.bnts {
		display: flex;
		justify-content: space-between;
		margin-top: 82rpx;
	}

	.qr_s {
		width: 270rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: rgba(80, 160, 254, 1);
		font-size: 34rpx;
		color: #FFFFFF;
		border-radius: 0 0 0 10rpx;
		text-align: center;
	}

	.qx_s {
		width: 270rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: rgba(80, 187, 254, 1);
		font-size: 34rpx;
		color: #FFFFFF;
		border-radius: 0 0 10rpx 0;
		text-align: center;
	}

	.covse {
		/* position:absolute;left:0rpx;top:0rpx; */
		margin-top: -250rpx;
		background: rgba(0, 0, 0, 1);
		width: 580rpx;
		/*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
		height: 270rpx;
		filter: alpha(opacity=60);
		/*设置透明度为60%*/
		opacity: 0.5;
		/*非IE浏览器下设置透明度为60%*/
		/* display: none; */
		transform: translateY(-40rpx);
		margin-left: 85rpx;
		z-Index: 9;
		border-radius: 20rpx;
		text-align: center;
	}
</style>
